<template>
  <div class="home">
      <!-- 导航栏 -->
      <my-header mytitle="91porn大型交友网站"></my-header>
      <!-- 主体内容部分 -->
      <div class="body">
        <!-- 轮播图 -->
        <mt-swipe :auto="5000" prevent class="swiper">
          <mt-swipe-item>
            <img src="@/assets/images/banner1.png" alt="">
          </mt-swipe-item>
          <mt-swipe-item>
            <img src="@/assets/images/banner2.png" alt="">
          </mt-swipe-item>
          <mt-swipe-item>
            <img src="@/assets/images/banner3.png" alt="">
          </mt-swipe-item>
          <mt-swipe-item>
            <img src="@/assets/images/banner4.png" alt="">
          </mt-swipe-item>
          <mt-swipe-item>
            <img src="@/assets/images/banner5.png" alt="">
          </mt-swipe-item>
        </mt-swipe>
        <!-- 产品分类 -->
        <div class="goods_nav">
          <div class="good">
            <img src="@/assets/images/nav1.png" alt="">
          </div>
          <div class="good">
            <img src="@/assets/images/nav2.png" alt="">
          </div>
          <div class="good">
            <img src="@/assets/images/nav3.png" alt="">
          </div>
          <div class="good">
            <img src="@/assets/images/nav4.png" alt="">
          </div>
          <div class="good">
            <img src="@/assets/images/nav5.png" alt="">
          </div>
          <div class="good">
            <img src="@/assets/images/nav6.png" alt="">
          </div>
        </div>
        <!-- 优惠促销 -->
        <div class="active">
          <div class="left">
            <img src="@/assets/images/active1.png" alt="">
            <img src="@/assets/images/active2.png" alt="">
            <img src="@/assets/images/active4.png" alt="">
            <img src="@/assets/images/active5.png" alt="">
          </div>
          <div class="right">
            <img class="right_img" src="@/assets/images/active3.png" alt="">
          </div>
        </div>
        <!-- 品牌专区 -->
        <div class="brand">
          <img src="@/assets/images/title0.png" alt="">
          <div class="content">
            <img src="@/assets/images/brand1.png" alt="">
            <img src="@/assets/images/brand2.png" alt="">
            <img src="@/assets/images/brand3.png" alt="">
            <img src="@/assets/images/brand4.png" alt="">
            <img src="@/assets/images/brand5.png" alt="">
            <img src="@/assets/images/brand6.png" alt="">
            <img src="@/assets/images/brand7.png" alt="">
            <img src="@/assets/images/brand8.png" alt="">
          </div>
        </div>
        <!-- 生活专区 -->
        <div class="sports">
          <img src="@/assets/images/title1.png" alt="">
          <ul class="content">
            <li>
              <img src="@/assets/images/product.jpg" alt="">
              <div class="attr">
                <div class="product_title">adidas阿迪达斯 男式 场下休闲篮球鞋S83700</div>
                <div class="price">
                  <span class="new_price">¥560.00</span>
                  <del class="old_price">¥560.00</del>
                </div>
              </div>
              <mt-button class="buy-btn" type="primary" size="small">立即购买</mt-button>
            </li>
            <li>
              <img src="@/assets/images/product.jpg" alt="">
              <div class="attr">
                <div class="product_title">adidas阿迪达斯 男式 场下休闲篮球鞋S83700</div>
                <div class="price">
                  <span class="new_price">¥560.00</span>
                  <del class="old_price">¥560.00</del>
                </div>
              </div>
              <mt-button class="buy-btn" type="primary" size="small">立即购买</mt-button>
            </li>
            <li>
              <img src="@/assets/images/product.jpg" alt="">
              <div class="attr">
                <div class="product_title">adidas阿迪达斯 男式 场下休闲篮球鞋S83700</div>
                <div class="price">
                  <span class="new_price">¥560.00</span>
                  <del class="old_price">¥560.00</del>
                </div>
              </div>
              <mt-button class="buy-btn" type="primary" size="small">立即购买</mt-button>
            </li>
            <li>
              <img src="@/assets/images/product.jpg" alt="">
              <div class="attr">
                <div class="product_title">adidas阿迪达斯 男式 场下休闲篮球鞋S83700</div>
                <div class="price">
                  <span class="new_price">¥560.00</span>
                  <del class="old_price">¥888.00</del>
                </div>
              </div>
              <mt-button class="buy-btn" type="primary" size="small">立即购买</mt-button>
            </li>
          </ul>
        </div>
        <!-- 女士专栏 -->
        <div class="wuman">
          <img src="@/assets/images/title2.png" alt="">
          <ul class="content">
            <li>
              <img src="@/assets/images/product.jpg" alt="">
              <div class="attr">
                <div class="product_title">adidas阿迪达斯 男式 场下休闲篮球鞋S83700</div>
                <div class="price">
                  <span class="new_price">¥560.00</span>
                  <del class="old_price">¥560.00</del>
                </div>
              </div>
              <mt-button class="buy-btn" type="primary" size="small">立即购买</mt-button>
            </li>
            <li>
              <img src="@/assets/images/product.jpg" alt="">
              <div class="attr">
                <div class="product_title">adidas阿迪达斯 男式 场下休闲篮球鞋S83700</div>
                <div class="price">
                  <span class="new_price">¥560.00</span>
                  <del class="old_price">¥560.00</del>
                </div>
              </div>
              <mt-button class="buy-btn" type="primary" size="small">立即购买</mt-button>
            </li>
            <li>
              <img src="@/assets/images/product.jpg" alt="">
              <div class="attr">
                <div class="product_title">adidas阿迪达斯 男式 场下休闲篮球鞋S83700</div>
                <div class="price">
                  <span class="new_price">¥560.00</span>
                  <del class="old_price">¥560.00</del>
                </div>
              </div>
              <mt-button class="buy-btn" type="primary" size="small">立即购买</mt-button>
            </li>
            <li>
              <img src="@/assets/images/product.jpg" alt="">
              <div class="attr">
                <div class="product_title">adidas阿迪达斯 男式 场下休闲篮球鞋S83700</div>
                <div class="price">
                  <span class="new_price">¥560.00</span>
                  <del class="old_price">¥888.00</del>
                </div>
              </div>
              <mt-button class="buy-btn" type="primary" size="small">立即购买</mt-button>
            </li>
          </ul>
        </div>
        <!-- 兄贵专栏 -->
        <div class="ass-we-can">
          <img src="@/assets/images/title3.png" alt="">
          <ul class="content">
            <li>
              <img src="@/assets/images/product.jpg" alt="">
              <div class="attr">
                <div class="product_title">adidas阿迪达斯 男式 场下休闲篮球鞋S83700</div>
                <div class="price">
                  <span class="new_price">¥560.00</span>
                  <del class="old_price">¥560.00</del>
                </div>
              </div>
              <mt-button class="buy-btn" type="primary" size="small">立即购买</mt-button>
            </li>
            <li>
              <img src="@/assets/images/product.jpg" alt="">
              <div class="attr">
                <div class="product_title">adidas阿迪达斯 男式 场下休闲篮球鞋S83700</div>
                <div class="price">
                  <span class="new_price">¥560.00</span>
                  <del class="old_price">¥560.00</del>
                </div>
              </div>
              <mt-button class="buy-btn" type="primary" size="small">立即购买</mt-button>
            </li>
            <li>
              <img src="@/assets/images/product.jpg" alt="">
              <div class="attr">
                <div class="product_title">adidas阿迪达斯 男式 场下休闲篮球鞋S83700</div>
                <div class="price">
                  <span class="new_price">¥560.00</span>
                  <del class="old_price">¥560.00</del>
                </div>
              </div>
              <mt-button class="buy-btn" type="primary" size="small">立即购买</mt-button>
            </li>
            <li>
              <img src="@/assets/images/product.jpg" alt="">
              <div class="attr">
                <div class="product_title">adidas阿迪达斯 男式 场下休闲篮球鞋S83700</div>
                <div class="price">
                  <span class="new_price">¥560.00</span>
                  <del class="old_price">¥888.00</del>
                </div>
              </div>
              <mt-button class="buy-btn" type="primary" size="small">立即购买</mt-button>
            </li>
          </ul>
        </div>
        <!-- 底部导航 -->
      </div>
      <tab-bar></tab-bar>
  </div>
</template>
<script>
import MyHeader from '@/components/my-header'
import TabBar from '@/components/tab-bar'
export default {
  components: {
    MyHeader,
    TabBar
  }
}
</script>
<style lang="scss" scoped>
  img{
    width: 100%;
  }
  ul{
    margin-top: -5px;
  }
  .body{
    padding: 45px 0;
    .swiper{
        height: 240px;
        img{
          width: 100%;
          height: 100%;
        }
        .is-active{
          color: #f87001;
        }
      }
    .goods_nav{
        display: flex;
        padding: 10px;
        flex-wrap: wrap;
        border-bottom: 1px solid #ccc;
        .good{
          width: 33.33%;
          img{
            width: 100%;
            height: 100%;
          }
        }
    }
    .active{
      display: flex;
      padding: 2px 10px;
      .left{
        width: 70%;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        img{
          width: 50%;
          height: 50%;
        }
      }
      .right{
        width: 30%;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .brand{
      padding: 2px 10px;
      .content{
        display: flex;
        flex-wrap: wrap;
        img{
          width: 25%;
          height: 25%;
        }
      }
    }
    .sports{
      padding: 2px 10px;
      >img{
        width: 100%;
        margin-bottom: -20px;
      }
    }
      .content{
        padding: 0;
        list-style: none;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        >li{
          margin-top: 10px;
          box-shadow: 0 0 5px #ccc;
          width: 47%;
          padding: 5px 0;
          text-align: center;
          img{
            width: 100%;
            height: 60%;
          }
          .attr{
            padding: 10px;
            font-size: 13px;
            .product_title{
              color: #999;
              font-size: 14px;
              height: 40px;
              line-height: 18px;
              overflow: hidden;
            }
            .new_price{
              color: red;
              font-weight: 600
            }
            .old_price{
              color: #aaa
            }
          }
        }
      }
  }
</style>
